<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>维基百科</title>
        <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
        <link href="https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css" rel="stylesheet">
        <script src="https://s2.ssl.qhres2.com/!2dd0bbf7/echats.js"></script>
        <style>
            :root {
                --primary-dark: #1a365d;
                --primary-light: #2c5282;
                --accent: #dd6b20;
                --accent-light: #ed8936;
                --gray-light: #f7fafc;
                --gray-medium: #e2e8f0;
                --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            body {
                font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
                line-height: 1.6;
                color: var(--primary-dark);
                background-color: var(--gray-light);
                margin: 0;
                padding: 0;
                animation: fadeIn 0.8s ease-out;
                overflow-x: hidden;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }

                to {
                    opacity: 1;
                }
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 2rem;
            }

            header {
                background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
                color: white;
                padding: 4rem 0;
                position: relative;
                overflow: hidden;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }

            .particles {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }

            .header-content {
                position: relative;
                z-index: 2;
            }

            h1 {
                font-size: 3.5rem;
                font-weight: 700;
                margin-bottom: 1rem;
                line-height: 1.2;
                letter-spacing: -0.05em;
            }

            .subtitle {
                font-size: 1.5rem;
                font-weight: 300;
                max-width: 800px;
                margin-bottom: 2rem;
                opacity: 0.9;
            }

            .stats-container {
                display: flex;
                gap: 2rem;
                margin: 3rem 0;
                flex-wrap: wrap;
            }

            .stat-item {
                background: rgba(255, 255, 255, 0.1);
                padding: 1.5rem;
                border-radius: 8px;
                backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                transition: var(--transition);
                min-width: 200px;
            }

            .stat-item:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            }

            .stat-number {
                font-size: 2.5rem;
                font-weight: 700;
                color: var(--accent);
                margin-bottom: 0.5rem;
                display: inline-block;
            }

            .stat-label {
                font-size: 1rem;
                opacity: 0.8;
            }

            section {
                padding: 4rem 0;
                position: relative;
            }

            .section-title {
                font-size: 2rem;
                font-weight: 600;
                color: var(--primary-dark);
                margin-bottom: 2rem;
                position: relative;
                display: inline-block;
            }

            .section-title:after {
                content: '';
                position: absolute;
                bottom: -8px;
                left: 0;
                width: 60px;
                height: 4px;
                background: var(--accent);
                border-radius: 2px;
            }

            .features-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 2rem;
                margin: 3rem 0;
            }

            .feature-card {
                background: white;
                border-radius: 8px;
                padding: 2rem;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
                transition: var(--transition);
                border-left: 4px solid var(--accent);
            }

            .feature-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            }

            .feature-icon {
                font-size: 2rem;
                color: var(--accent);
                margin-bottom: 1.5rem;
            }

            .feature-title {
                font-size: 1.25rem;
                font-weight: 600;
                margin-bottom: 1rem;
                color: var(--primary-dark);
            }

            .feature-desc {
                color: var(--primary-light);
                font-size: 1rem;
            }

            .tech-list {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                margin: 2rem 0;
            }

            .tech-tag {
                background: var(--primary-dark);
                color: white;
                padding: 0.5rem 1rem;
                border-radius: 20px;
                font-size: 0.875rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                transition: var(--transition);
            }

            .tech-tag:hover {
                background: var(--accent);
                transform: scale(1.05);
            }

            .chart-container {
                height: 400px;
                margin: 3rem 0;
                background: white;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
                padding: 1rem;
            }

            footer {
                background: var(--primary-dark);
                color: white;
                padding: 3rem 0;
                text-align: center;
                margin-top: 4rem;
            }

            .footer-text {
                font-size: 16pt;
                color: var(--gray-medium);
                opacity: 0.7;
            }

            @media (max-width: 768px) {
                h1 {
                    font-size: 2.5rem;
                }

                .subtitle {
                    font-size: 1.25rem;
                }

                .stats-container {
                    flex-direction: column;
                    gap: 1rem;
                }

                .section-title {
                    font-size: 1.75rem;
                }
            }
        </style>
    </head>
    <body>
        <header>
            <div class="particles" id="particles"></div>
            <div class="container header-content">
                <h1>语言维基百科</h1>
                <p class="subtitle">全球最大的多语言百科全书协作项目，由非营利组织维基媒体基金会运营</p>
                <div class="stats-container">
                    <div class="stat-item">
                        <span class="stat-number">6,000万+</span>
                        <span class="stat-label">条目数量</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">300+</span>
                        <span class="stat-label">语言版本</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">数亿</span>
                        <span class="stat-label">活跃编辑者</span>
                    </div>
                </div>
            </div>
        </header>
        <section>
            <div class="container">
                <h2 class="section-title">核心功能</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-edit"></i>
                        </div>
                        <h3 class="feature-title">开放编辑</h3>
                        <p class="feature-desc">全球用户可共同编写与修订内容，构建集体智慧的结晶</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-language"></i>
                        </div>
                        <h3 class="feature-title">多语言支持</h3>
                        <p class="feature-desc">提供300多种语言版本，满足全球用户的知识需求</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-project-diagram"></i>
                        </div>
                        <h3 class="feature-title">知识图谱</h3>
                        <p class="feature-desc">通过实体关联构建知识网络，实现跨领域知识连接</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-history"></i>
                        </div>
                        <h3 class="feature-title">历史版本</h3>
                        <p class="feature-desc">完整记录每次编辑变更记录，确保内容可追溯</p>
                    </div>
	    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-history"></i>
                        </div>
                        <h3 class="feature-title">特殊支持</h3>
                        <p class="feature-desc">网站开发者自行开发的编程语言也支持，带来无穷乐趣</p>
                     </div>
                </div>
                <div class="chart-container" id="languageChart"></div>
            </div>
        </section>
        <section style="background: var(--gray-medium);">
            <div class="container">
                <h2 class="section-title">技术特色</h2>
                <div class="tech-list">
                    <div class="tech-tag">
                        <i class="fas fa-server"></i>
                        MediaWiki引擎驱动                
                    </div>
                    <div class="tech-tag">
                        <i class="fas fa-code"></i>
                        语义化HTML结构                
                    </div>
                    <div class="tech-tag">
                        <i class="fas fa-mobile-alt"></i>
                        响应式布局适配                
                    </div>
                    <div class="tech-tag">
                        <i class="fas fa-users"></i>
                        实时协作编辑系统                
                    </div>
                </div>
                <div class="chart-container" id="growthChart"></div>
            </div>
        </section>
        <footer>
            <div class="container">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/LibreOffice_6.0_Draw_Icon.svg/120px-LibreOffice_6.0_Draw_Icon.svg.png" alt="维基百科图标" style="height: 60px; margin-bottom: 1rem;">
                <p class="footer-text">还愣着干嘛，马上加入啊</p>
            </div>
        </footer>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const primaryDark = getComputedStyle(document.documentElement).getPropertyValue('--primary-dark').trim();
                const primaryLight = getComputedStyle(document.documentElement).getPropertyValue('--primary-light').trim();
                const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
                const accentLight = getComputedStyle(document.documentElement).getPropertyValue('--accent-light').trim();
                function initParticles() {
                    const canvas = document.createElement('canvas');
                    canvas.id = 'particles-canvas';
                    document.getElementById('particles').appendChild(canvas);
                    canvas.width = document.getElementById('particles').offsetWidth;
                    canvas.height = document.getElementById('particles').offsetHeight;
                    const ctx = canvas.getContext('2d');
                    const particles = [];
                    const particleCount = 150;
                    for (let i = 0; i < particleCount; i++) {
                        particles.push({
                            x: Math.random() * canvas.width,
                            y: Math.random() * canvas.height,
                            size: Math.random() * 2 + 1,
                            speedX: Math.random() * 1 - 0.5,
                            speedY: Math.random() * 1 - 0.5,
                            color: `rgba(255, 255, 255, ${Math.random() * 0.3 + 0.1})`
                        });
                    }
                    function animateParticles() {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        for (let i = 0; i < particles.length; i++) {
                            const p = particles[i];
                            p.x += p.speedX;
                            p.y += p.speedY;
                            if (p.x < 0 || p.x > canvas.width)
                                p.speedX *= -1;
                            if (p.y < 0 || p.y > canvas.height)
                                p.speedY *= -1;
                            ctx.beginPath();
                            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                            ctx.fillStyle = p.color;
                            ctx.fill();
                        }
                        requestAnimationFrame(animateParticles);
                    }
                    animateParticles();
                    window.addEventListener('resize', function() {
                        canvas.width = document.getElementById('particles').offsetWidth;
                        canvas.height = document.getElementById('particles').offsetHeight;
                    });
                }
                function initCharts() {
                    const languageChart = echarts.init(document.getElementById('languageChart'));
                    const growthChart = echarts.init(document.getElementById('growthChart'));
                    const languageOption = {
                        title: {
                            text: '主要语言版本分布',
                            left: 'center',
                            textStyle: {
                                color: primaryDark
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            right: 10,
                            top: 'center',
                            textStyle: {
                                color: primaryDark
                            }
                        },
                        series: [{
                            name: '语言分布',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold',
                                    color: primaryDark
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [{
                                value: 640,
                                name: '英文版',
                                itemStyle: {
                                    color: accent
                                }
                            }, {
                                value: 210,
                                name: '德文版',
                                itemStyle: {
                                    color: accentLight
                                }
                            }, {
                                value: 180,
                                name: '法文版',
                                itemStyle: {
                                    color: primaryLight
                                }
                            }, {
                                value: 150,
                                name: '西班牙文版',
                                itemStyle: {
                                    color: primaryDark
                                }
                            }, {
                                value: 120,
                                name: '俄文版',
                                itemStyle: {
                                    color: '#4c51bf'
                                }
                            }, {
                                value: 80,
                                name: '日文版',
                                itemStyle: {
                                    color: '#6b46c1'
                                }
                            }, {
                                value: 70,
                                name: '中文版',
                                itemStyle: {
                                    color: '#9f7aea'
                                }
                            }, {
                                value: 360,
                                name: '其他语言',
                                itemStyle: {
                                    color: '#e2e8f0'
                                }
                            }]
                        }]
                    };
                    const growthOption = {
                        title: {
                            text: '维基百科条目增长趋势',
                            left: 'center',
                            textStyle: {
                                color: primaryDark
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['2010', '2015', '2020', '2025'],
                            axisLine: {
                                lineStyle: {
                                    color: primaryDark
                                }
                            },
                            axisLabel: {
                                color: primaryDark
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '条目数量(万)',
                            axisLine: {
                                lineStyle: {
                                    color: primaryDark
                                }
                            },
                            axisLabel: {
                                color: primaryDark,
                                formatter: '{value}'
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e2e8f0'
                                }
                            }
                        },
                        series: [{
                            name: '条目数量',
                            type: 'line',
                            smooth: true,
                            data: [1500, 2800, 4500, 6000],
                            itemStyle: {
                                color: accent
                            },
                            lineStyle: {
                                width: 4,
                                color: accent
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0,0,0,1,[{
                                    offset: 0,
                                    color: accent + '80'
                                }, {
                                    offset: 1,
                                    color: accent + '00'
                                }])
                            }
                        }]
                    };
                    languageChart.setOption(languageOption);
                    growthChart.setOption(growthOption);
                    window.addEventListener('resize', function() {
                        languageChart.resize();
                        growthChart.resize();
                    });
                }
                initParticles();
                initCharts();
            });
        </script>
    </body>
</html>
<!-- 还愣着干嘛，马上加入啊 -->
